<%--
  Created by IntelliJ IDEA.
  User: 孙伟业
  Date: 2020/5/30
  Time: 10:08
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>personalInformationUpdate</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="../css/site.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

    <style>
        .space{
            margin-bottom: 30px;
        }

        .tip{
            color: red;
            float: right;
        }
    </style>

</head>

<body>

<script src="../js/jquery.min.js"></script>

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">

                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="active">
                            <a href="a.html">我的</a>
                        </li>
                        <li>
                            <a href="settings.htm">版块二</a>
                        </li>
                        <li>
                            <a href="help.htm">板块三</a>
                        </li>
                    </ul>

                    <form class="navbar-search pull-left" action="">
                        <input type="text" class="search-query span2" placeholder="Search" />
                    </form>

                    <ul class="nav pull-right">
                        <li>
                            <a href="">${user.userName}</a>           <%-- 这种写法    <%=session.getAttribute("username")%>   --%>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span3">
            <div class="well" style="padding: 8px 0;">
                <ul class="nav nav-list">
                    <li>
                        <a href="http://localhost:8888/forum/4_user/a.jsp"><i class="icon-black icon-home"></i> 首页</a>
                    </li>
                    <li>
                        <a href="http://localhost:8888/forum/4_user/dongtai.jsp"><i class="icon-folder-open"></i> 动态</a>
                    </li>
                    <li>
                        <a href="http://localhost:8888/forum/4_user/collect.jsp"><i class="icon-folder-open"></i> 收藏</a>
                    </li>
                    <li>
                        <a href="http://localhost:8888/forum/4_user/concernlist.jsp"><i class="icon-envelope"></i> 关注</a>
                    </li>
                    <li>
                        <a href="http://localhost:8888/forum/4_user/concernedlist.jsp"><i class="icon-envelope"></i> 粉丝</a>
                    </li>
                    <li class="active">
                        <a href="http://localhost:8888/forum/4_user/personalInformation.jsp"><i class="icon-user"></i> 个人资料</a>
                    </li>
                    <li class="divider">
                </ul>
            </div>
        </div>





        <div class="span9">
            <h1>
                修改个人信息</a>
            </h1>
            <hr>

            <form  method="post" style="width: 40%;margin: 0 auto" onsubmit="return check()">

                <div class="form-group">
                    <label for="userName">姓名</label>
                    <span id="nametip" class="tip"></span>
                    <input type="text" class="form-control" id="userName" placeholder="${user.userName}" name="userName">
                </div>

                <div class="space">
                    <label >性别</label>
                    <div class="radio-inline">
                        <label>
                            <input type="radio" name="userSex" id="optionsRadios1" value="男" >
                            男
                        </label>
                    </div>
                    <div class="radio-inline">
                        <label>
                            <input type="radio" name="userSex" id="optionsRadios2" value="女">
                            女
                        </label>
                    </div>
                </div>
                <%--<div class="form-group">--%>
                    <%--<label for="userBirthday">生日</label>--%>
                    <%--<span id="birthdaytip" class="tip"></span>--%>
                    <%--<input type="date" class="form-control" id="userBirthday" placeholder="${user.userBirthday}" name="userBirthday">--%>
                <%--</div>--%>

                <div class="form-group">
                    <label for="userQq">QQ</label>
                    <span id="qqtip" class="tip"></span>
                    <input type="number" class="form-control" id="userQq" placeholder="${user.userQq}" name="userQq">
                </div>

                <div class="form-group">
                    <label for="userArea">地区</label>
                    <span id="areatip" class="tip"></span>
                    <input type="text" class="form-control" id="userArea" placeholder="${user.userArea}" name="userArea">
                </div>

                <div class="form-group">
                    <label for="userPhone">手机号</label>
                    <span id="phonetip" class="tip"></span>
                    <input type="number" class="form-control" id="userPhone" placeholder="${user.userPhone}" name="userPhone">
                </div>


                <button class="btn btn-info form-control" onclick="update()">修改</button>
            </form>



        </div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/site.js"></script>

<script>

    function check() {
        var phone = $('#userPhone').val();
        if (phone) {
            // 判断手机号是否合法
            if(!(/^1[3456789]\d{9}$/.test(phone))){
                $('#phonetip').text("请输入正确的手机号");
                return false;
            } else {
                $('#phonetip').text("");
            }
        } else {
            $('#phonetip').text("手机号不能为空")
            return false;
        }

    }
</script>

<script src="../jquery/jquery-3.4.1.js"></script>
<script>
    function update() {

        var userId = ${user.userId}

        alert(userId)

        var userName = $('input[name="userName"]').val()
        var userPhone = $('input[name="userPhone"]').val()
        var userSex = $("input[type='radio']:checked").val()
        // var userBirthday = $('input[name="userBirthday"]').val()
        var userQq = $('input[name="userQq"]').val()
        var userArea = $('input[name="userArea"]').val()

        var one = "";
        var two = "";
        var three = "";
        var four = "";
        var five = "";
        var six = "";
        var zero = "";

        one = "&userName=" + userName
        two = "&userSex=" + userSex
        // three = "&userBirthday=" + userBirthday
         four = "&userQq=" + userQq
         five = "&userArea=" + userArea
         six = "&userPhone=" + userPhone

        // zero = one + two + three + four + five + six
        zero = one+ two + four + five + six

        alert(userQq)
        alert(userSex)
        // alert(userBirthday)

        $.ajax({
            url:'/forum/usercenter/update?userId=' + userId + zero,

            type:"post",
            success:function (data) {
                if(data=="success"){
                    // bootstrap 模态框提示
                    alert("修改成功")
                    // 修改成功提示-》
                } else {
                    alert("修改失败")
                }
            },
            fail:function(){
                alert("fail")
            }
        })

    }

</script>

</body>
</html>
